<template>
  <div class="index-box clearfix">
    <!-- banner -->
    <div class="re banner" v-if="bannerSwiperData.show && banner.length>0">
      <swiper :options="bannerSwiperConfig">
        <swiper-slide class="swiper-slide" v-for="(item,index) in banner" :key="index">
          <div class="link cur" @click="indexLink(item)" :style="{backgroundImage:'url('+imgUrl+item.attachment.path+')'}"></div>
        </swiper-slide>
      </swiper>
      <swiperBtn :swiperData = 'bannerSwiperData' />
    </div>
    
    <!-- 快捷服务 -->
    <div class="serve-main clearfix padd" v-if="serveList.length>0">
      <div class="box clearfix">
        <h2 class="h-tit">{{$t('common.other.kserve')}}</h2>
        <div class="re serve-banner" v-if="serveSwiperData.show && serveList.length">
          <swiper :options="serveSwiperConfig">
            <swiper-slide class="swiper-slide" v-for="(item,index) in serveList" :key="index">
                <div class="dd">
                  <div class="imgW"><img :src="imgUrl+(item.attachment?item.attachment.path:'')" alt=""></div>
                  <div class="con ease flex-ct">
                    <div class="div">
                      <p class="title">{{item.itemName}}</p>
                      <b class="line">· ——</b>
                      <div class="np">{{item.description}}</div>
                      <span class="cur more" @click="indexLink(item)">{{$t('common.btn.more')}}</span>
                    </div>
                  </div>
                </div>
            </swiper-slide>
          </swiper>
          <swiperBtn :swiperData = 'serveSwiperData' />
        </div>
      </div>
    </div>
    <!-- 新闻资讯 -->
    <div class="news-main clearfix padd bgff">
      <div class="box clearfix">
        <h2 class="h-tit">{{$t('common.other.newsTitle')}}</h2>
        <div class="font0 news-box ov">
          <div class="fl w1 cur">
            <div class="re news-banner" v-if="serveSwiperData.show && newsLeft.length">
              <swiper :options="newsSwiperConfig">
                <swiper-slide class="swiper-slide" v-for="(item,index) in newsLeft" :key="index">
                    <div class="dd" @click="newsLink(item)">
                      <div class="imgW"><img :src="imgUrl+item.attachment.path" alt="" class="img" v-if="item.attachment"></div>
                      <h2 class="h2 np font16">{{item.title}}</h2>
                      <!-- <div class="h66 np font13" v-html="item.content"></div> -->
                    </div>
                </swiper-slide>
              </swiper>
              <swiperBtn :swiperData = 'newsSwiperData' />
            </div>
            
          </div>
          <div class="fr w2">
            <ul class="ul news-list">
              <li :class="[item.id == newsCurId ? 'red1':'']" v-for="(item, index) in newsList" :key='index' @click="newsLink(item)">
                <div class="cur li cur" v-if="index<5">
                  <h3 class="font16 flex-lect">
                    <b class="ico">·</b>
                    <span class="ntit">{{item.title}}</span>
                    <span class="newTag rd15" v-if="item.tagTxt && item.tag !=0">{{item.tagTxt}}</span>
                  </h3>
                  <p class="time h99 font16">{{item.createTime}}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <router-link to="/news?type=0" class="news-more cur">{{$t('common.personService.seemore')}} <img src="../../assets/images/ico-ri.png" class="inbk ease" alt=""></router-link>
      </div>
    </div>

  </div>
</template>
<script>
import swiperBtn from '@/components/swiperBtn.vue' //轮播的翻页 + 左右按钮
import {swiperConfig, ajax } from '@/utils/js.js'
import {serviceItems, homeBanner,homeNews, photoStyle} from '@/services/api.js'
const log = console.log
export default {
  components:{
    swiperBtn
  },
  data() {
    return {
      banner:[],
      bannerSwiperConfig:'',//banner-轮播配置,
      bannerSwiperData:{show:false}, //banner-轮播参数
      serveList:[],
      serveSwiperData:{show:false}, //快捷服务-轮播参数
      serveSwiperConfig:'', //快捷服务-轮播配置,
      newsSwiperData:{show:false}, //新闻-轮播参数
      newsSwiperConfig:'', //新闻-轮播配置,
      newsLeft:[],
      newsCurId:'',
      newsList:[],
      imgUrl:this.$store.state.imgUrl
    }
  },
  mounted(){
    let userInfo = this.$store.state.userInfo
    if(!userInfo){
      userInfo = {isLogin:false}
    }
    this.$store.dispatch('setUserInfo',userInfo);
    // console.log('11111',this.$store.state.Authorization)
    let data = {
        view:4,
        prev:'prev1',
        next:'next1',
        show:true,
    }
    swiperConfig(this,data,'serveSwiperConfig','serveSwiperData',index=>{})
    let bannerData = {
      view:1,
      show:true,
      autoplayLast:true,
      fy:'bannerdot'
    }
    swiperConfig(this,bannerData,'bannerSwiperConfig','bannerSwiperData',index=>{})
    let newsData = {
      view:1,
      show:true,
      autoplayLast:true,
      delay:5000,
    }
    swiperConfig(this,newsData,'newsSwiperConfig','newsSwiperData',index=>{
      this.newsCurId = this.newsList[index+1].id
    })
    this.content()
    
  },
  computed:{
  },
  watch:{
    '$i18n.locale'(){
      this.content()
    },
  },
  methods:{
    // outLink  0-未开启链接，1-开启链接是这个意思
    newsLink(e){
      // belongType 0 咨询新闻 1 政策发文 2 活动报名， tag 1 热门 2 最新
      let routeUrl;
      if(e.belongType ==0 || e.belongType ==2 ){
        if(e.belongType == 2){
          routeUrl = this.$router.resolve({
         		path: 'news_detail?type=1&id='+e.id,
          });
        }else{
          routeUrl = this.$router.resolve({
         		path: 'news_detail?type=0&id='+e.id,
          });
        }
        
      }else{
        routeUrl = this.$router.resolve({
         		path: '/c_policy_detail?type=policySending&id='+e.id,
        });
      }
	    window.open(routeUrl.href, '_blank');
    },
    content(){
      
      // 主题轮播
      ajax(this,homeBanner,{},res=>{
        this.banner = res.data
      })
      //新闻列表
      ajax(this,homeNews,{},res=>{
        this.newsList = res.data
		// console.log(res.data)
      })
      //服务快捷导航
      ajax(this,serviceItems,{serviceType:1},res=>{
        this.serveList = res.data
      })
      // 照片风采
      ajax(this,photoStyle,{},res=>{
		    console.log(res.data)
        this.newsLeft = res.data
        if(res.data.length > 0){
          this.newsCurId = res.data[0].id
        }
      })
    },
    //首页跳转
    indexLink(data){
      console.log(data.outLink,data.linkUrl)
      // 0内部链接，1外部链接
     if(data.outLink && data.outLink==0){
        window.open(data.linkUrl,'_self');
      }else{
        window.open(data.linkUrl,'_blank')
      }
    },
    
  }
}
</script>
<style lang="scss">
  .serve-main{background-color: #FAFAFA;}
  .banner{
    img{display: block;}
    .el-carousel--button{
      width:12px;
      height:12px;
      background:rgba(255,255,255,1);
      border-radius:50%;
      opacity: 1;
    }
    .el-carousel--indicator.is-active button{
      background-color: #0F54BC;
    }
  }
  .serve-banner{
    .dd{position: relative;text-align: center;width:96%;margin: 0 auto;overflow: hidden;cursor: pointer;
      .imgW{width:100%;height:345px;}
    }
    .dd img{width: 100%;height: 100%;object-fit: cover;display:block;}
    
    .con{
      position: absolute;width: 100%;height: 100%;left: 0;top: 0;background:rgba(30,30,30,0.79);color: #fff;
      .title{font-size: 24px;margin: 0 30px}
      .line{margin:20px 0 15px;display: block;}
      .np{margin: 0 30px;}
      
    }
    .prev1{left: -50px;}
    .next1{right: -50px;}
    .more{
      width:94px;
      line-height:28px;
      border:1px solid rgba(245,245,245,1);
      display: block;
      margin:0 auto;
      opacity: 0;
    }
    .dd:hover .con{background:rgba(15,84,188,0.8);}
    .dd:hover .more{opacity: 1;margin-top: 36px;}
    // .dd:hover .np{margin-bottom:60px;}
  }
  .news-box{
    .w1{
      width:44.5%;
      .h2{margin:20px 0 11px;line-height: 1;}
      .np{line-height: 20px;height:40px;}
    }
    .w1:hover{color: #0F54BC;}
    .w2{width:46.5%;padding-top:10px;box-sizing: border-box;}
    .news-list{
      .li{
        position: relative;padding-bottom:20px;border-bottom:1px solid #ededed;margin-bottom:20px;
        .ntit{line-height: 1;max-width:500px;}
        .ico{position: absolute;left: -10px;color: #999;}
        
      }
      .li:hover .ntit{color: #0F54BC;}
    }
    
  }
  .news-more{
      width:222px;
      line-height:46px;
      color: #fff;
      text-align: center;
      display: block;
      background:rgba(15,84,188,1);
      border:1px solid rgba(38,163,247,1);
      opacity:1;
      border-radius:2px;
      margin:40px auto 0;
  }
  .news-more:hover {background:rgba(15,84,188,0.9);}
  .news-more:hover img{margin-left:10px;}
  .banner .link{height: 450px;display: block;width: 100%;background-position: center;background-repeat: no-repeat;background-size: cover;}
  .bannerdot {width: 100%;bottom:10px;left: 0;z-index: 999;}
  .bannerdot .swiper-pagination-bullet{width:12px;height:12px;background-color: #fff;opacity: 1;margin:0 8px;}
  .bannerdot .swiper-pagination-bullet-active{background-color: #0F54BC;}
  .news-banner .imgW{width:100%;height: 306px;}
  .news-banner .imgW img{object-fit: cover;width: 100%;height: 100%;}
</style>